<template>
  <view class="index">
    <view class="main">
      <!-- 顶部搜索 -->
      <view class="header_search">
        <svg t="1742225872078" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7741" width="24" height="24"><path d="M895.362889 128.853858H135.997131c-41.735766 0-75.936241 22.935003-75.936242 71.33372 0 48.39671 34.200476 71.331714 75.936242 71.331714h759.365758c41.735766 0 75.936241-22.935003 75.936241-71.331714-0.103691-48.513111-34.199807-71.333721-75.936241-71.33372z m0 319.491875H135.997131c-41.735766 0-75.936241 22.935003-75.936242 71.33372s34.200476 71.333721 75.936242 71.333721h759.365758c41.735766 0 75.936241-22.935003 75.936241-71.333721-0.103691-48.51378-34.199807-71.333721-75.936241-71.33372z m0 311.626113H135.997131c-41.735766 0-75.936241 22.933665-75.936242 71.331713 0 48.392696 34.200476 71.333721 75.936242 71.333721h759.365758c41.735766 0 75.936241-22.941024 75.936241-71.333721-0.103691-48.519132-34.199807-71.331714-75.936241-71.331713z m0 0" p-id="7742" fill="#707070"></path></svg>
        <view class="searchInp">
          <svg t="1742225973542" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9107" width="19" height="19"><path d="M713.558 632.332l163.355 163.356c17.183 17.183 17.183 45.042 0 62.225s-45.042 17.183-62.225 0L651.332 694.558C526.72 788.869 348.49 779.21 234.86 665.58c-124.187-124.187-124.187-325.533 0-449.72 124.187-124.187 325.533-124.187 449.72 0 113.63 113.63 123.29 291.86 28.978 416.472z m-91.204-28.978c89.821-89.82 89.821-235.448 0-325.269-89.82-89.82-235.448-89.82-325.269 0-89.82 89.82-89.82 235.449 0 325.27 89.82 89.82 235.449 89.82 325.27 0z" fill="#AFAFAF" p-id="9108"></path></svg>
          <span>搜索</span>
        </view>
      </view>
      <!-- 轮播 -->
      <view class="banner_wrap">
       

      </view>
      <!-- 导航栏 -->
      <view class="tab_wrap">

      </view>
      <!-- 推荐歌单 -->
      <view class="rec_playlist">
        <div class="rec_tit">
          <span></span>推荐歌单
        </div>
      </view>
      <!-- 古风爵士热门精选 -->
      <view class="choice_playlist">

      </view>
      <!-- 雷达歌单 -->
      <view class="radar_playlist">

      </view>

    </view>
    <!-- 底部 -->
    <view class="footer">
      <view>发现</view>
      <view>我的</view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      title: 'Hello',
    }
  },
  onLoad() { },
  methods: {},
}
</script>

<style lang="scss" scoped>
.index {
  display: flex;
  flex-direction: column;
  width: 100vw;
  height: 100vh;
  .main {
    flex-grow: 1;
    overflow: hidden;
    overflow-y: scroll;
  }
  .footer {
    height: 50px;
    background: #fff;
    border-top: 1px solid rgba(0, 0, 0, 0.33);
    display: flex;
    flex-shrink: 0;
    position: relative;
    bottom: 0;
    view {
      flex: 1;
      text-align: center;
      line-height: 50px;
    }
  }
}
.header_search{
  height: 36px;
  margin: 15px;
  display: flex;
}
.banner_wrap{
  height: 134px;
  background: pink;
  margin: 15px;
}
.tab_wrap{
  height: 75px;
  background: lime;
}
.rec_playlist{
  height: 210px;
  background: skyblue;
}
.rec_tit{
  padding: 12px 10px;
  height: 42px;
  display: flex;
  align-items: center;
  span{
    display: block;
    width: 4px;
    height: 12px;
    border-radius: 10px;
    background-color: #c84341 !important;
    margin-right: 6px;
  }
}
.choice_playlist{
  height: 232px;
  background: rgba(0,0,0,.5);
}
.radar_playlist{
  height: 210px;
  background: hotpink;
}
</style>
